<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        body {
            background: #B4F8FA
        }
        #box {
            width: 400px;
            height:400px;
            border:5px solid #D5C0C0;
            position: relative;
            margin:10px auto;
            border-radius: 10px;
            overflow: hidden;
        }
        #box img {
            width:100%;
            height:100%;
            border-radius: 10px;
        }
        #box a {
            width:40px;
            height:40px;
            border:2px solid #D08787;
            position: absolute;
            top:50%;
            border-radius: 10px;
            margin-top: -20px;
            font:24px/40px "simhei";
            text-align: center;
            color:#ED4BD1;
        }
        #left{
            left:10px;
        }
        #right {
            right:10px;
        }
    </style>
    <script>
        // 当点击A标签的时候，让图片的变成下一张 图片的src发生变化
        // 字符串的拼接 + 会把左右两边的字符串链接在一起
        window.onload = function(){
            var oImg = document.getElementById('img1');
            var oRight = document.getElementById('right');
            var oLeft = document.getElementById('left');
            var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg'];
            var num = 1;
            // alert(arr[2])    
           // alert(arr.length)

            // oRight.onclick = function(){
            //     // num = num + 1;//2 + 1
            //     num ++;
            //     // alert(num)
            //     if(num > 6){
            //         num = 1;
            //     }
            //     oImg.src = 'img/'+ num +'.jpg';// 'img/3.jpg'
            // };
            oRight.onclick = function(){
                num ++;
                if(num > arr.length - 1 ){
                    num = 0;
                }
                oImg.src = arr[num];// 'img/3.jpg'
            };

            oLeft.onclick = function(){
                num --;
                if(num < 0 ){
                    num = arr.length - 1;
                }
                oImg.src = arr[num];// 'img/3.jpg'
            };
        };
    </script>
</head>
<body>
    <div id="box">
        <img src="img/1.jpg" alt="" id="img1">
        <a href="#" id="left"> < </a>
        <a href="#" id="right"> > </a>
    </div>
</body>
</html>